<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>148-充满科技感的文字效果</title>
    <style>
      .text {
        fill: none;
        stroke-width: 5;
        stroke-dasharray: 0 300;
        stroke-dashoffset: 0;
      }

      .text:nth-child(3n + 1) {
        stroke: #ffffff;
        animation: stroke 10s ease-in-out forwards;
      }
      .text:nth-child(3n + 2) {
        stroke: #808080;
        animation: stroke1 10s ease-in-out forwards;
      }

      .text:nth-child(3n + 3) {
        stroke: #696969;
        animation: stroke2 10s ease-in-out forwards;
      }

      @keyframes stroke {
        100% {
          stroke-dashoffset: 1000;
          stroke-dasharray: 80 160;
        }
      }

      @keyframes stroke1 {
        100% {
          stroke-dashoffset: 1080;
          stroke-dasharray: 80 160;
        }
      }

      @keyframes stroke2 {
        100% {
          stroke-dashoffset: 1160;
          stroke-dasharray: 80 160;
        }
      }
      /* Other styles */
      html,
      body {
        height: 100%;
      }

      body {
        background: #000000;
        background-size: 0.2em 100%;
        font: 14.5em/1 Open Sans, Impact;
        text-transform: uppercase;
        margin: 0;
      }

      svg {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <svg viewBox="0 0 1320 300">
      <!-- Symbol -->
      <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="50%" dy=".35em">你好世界</text>
      </symbol>
      <!-- Duplicate symbols -->
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
      <use xlink:href="#s-text" class="text"></use>
    </svg>
  </body>
</html>
